<template>
  <div class="button-test-container">
    <h1>按钮样式测试</h1>
    
    <div class="button-group">
      <h3>默认按钮</h3>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>
    
    <div class="button-group">
      <h3>自定义黄色按钮</h3>
      <el-button class="el-button--yellow">黄色按钮</el-button>
      <el-button class="el-button--yellow" plain>朴素黄色按钮</el-button>
      <el-button class="el-button--yellow" round>圆角黄色按钮</el-button>
      <el-button class="el-button--yellow" circle>
        <el-icon><Search /></el-icon>
      </el-button>
    </div>
    
    <div class="button-group">
      <h3>不同尺寸的黄色按钮</h3>
      <el-button class="el-button--yellow" size="large">大尺寸黄色按钮</el-button>
      <el-button class="el-button--yellow">默认尺寸黄色按钮</el-button>
      <el-button class="el-button--yellow" size="small">小尺寸黄色按钮</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
</script>

<style lang="scss" scoped>
.button-test-container {
  padding: 20px;
  .button-group {
    margin-bottom: 20px;
    h3 {
      margin-bottom: 10px;
      color: #333;
    }
    .el-button {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>